<template>
	<view>
		<image src="../../../../static/uview/common/z_big-img.png" mode="widthFix" style="width:100%"></image>
		<view class="outbox">
			<view class="item"  @click="goTo_customized">
				<view class="title">
					定制礼仪
				</view>
				<view class="deco">
					风格选择
				</view>
			</view>
			<view class="item"   @click="goTo_customiserve">
				<view class="title">
					定制服务
				</view>
				<view class="deco">
					个性化定制
				</view>
			</view>
		</view>
		<view class="reve"   @click="goTo_reserve">
			<image src="../../../../static/uview/common/纪念日.png" mode=""></image>
			<view class="txtbox">
				<span class="tit">预约服务</span>
				<br>
				<span class="inf">提前预约下葬服务，为您安排专业的团队</span>
			</view>
			<image src="../../../../static/uview/example/js_select_bak.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		
		methods: {
			// 跳转 定制礼仪页面
			goTo_customized(){
				this.$u.route({
					url:'/pages/view/fuzepark/ceremonyserve/customized/customized'
				})
			},
			
			// 跳转 定制服务页面
			goTo_customiserve(){
				this.$u.route({
					url:'/pages/view/fuzepark/ceremonyserve/customiserve/customiserve'
				})
			},
			
			// 跳转 预约服务页面
			goTo_reserve(){
				this.$u.route({
					url:'/pages/view/fuzepark/ceremonyserve/reserve/reserve'
				})
			}
			
		}
	}
</script>

<style scoped lang="less">
	.outbox{
		padding: 50upx 25upx;
		overflow: hidden;
		width: 100%;
	}
	.item{
		width: 40%;
		float: left;
		border: 2upx solid white;
		border-radius: 15upx;
		background-color:purple;
		text-align: center;
		padding: 35upx;
		.title{
			color:rgba(77,77,77);
			font-size: 36upx;
			font-weight: bold;
			margin-bottom: 30upx;
		}
		.deco{
			color: white;
			font-size: 24upx;
		}
	}
	.item:last-child{
		float: right;
		background-color: lightblue;
	}
	.reve{
		padding: 0 80upx;
		position: relative;
		background-color:rgba(245, 155, 34, 0.84);
	}
	.reve>image{
		position: absolute;
		width: 40upx;
		height: 40upx;
		top: 50%;
		transform: translateY(-50%);
	}
	.reve>image:first-child{
		left: 20upx;
	}
	.reve>image:last-child{
		right: 20upx;
	}
	.tit{
		color:rgb(127, 77, 18) ;
		font-size: 36upx;
		margin-bottom: 48upx;
	}
	.inf{
		color: white;
		margin-top: 50upx;
		font-size: 24upx;
		padding-top: 30upx;
	}
	.txtbox{
		padding:50upx 0;
	}
</style>
